<template>
	<view>

		<view class="page-body">
			<view class="page-section">
				<div class="table-container jihe" v-show="jihe">
					<div class="p5">
						<div class="table-content ucheck">
							<view class="p">自出款后第一次存款开始之后</view>
							<view class="p">总充值：<span class="allrecharge">{{ sumrecharges }}</span>元 </view>
							<view class="p">总有效投注：<span class="allbets">{{ withfees }}</span>元 <span class="betfee red">{{ betfee }}</span>（即所有产品的有效投注额）</view>
							<view class="p">取款次数：<span class="withdrawtimes">{{ withdrawtimes }}</span>次 <span class="withdrawfee red"></span></view>

							<view style="text-align: center;" class="all_tips tdsize">优惠稽核 + 常态性稽核 + 手续费 共需扣除 ￥<span class="koufei">{{ withfees }}</span></view>
							<view class="p">此次出款稽核时间：美东时间 <span class="check_time">2018-09-28 08:42:22</span></view>
							<br>
							<div style="text-align: center;"><button id="go_take_money" class="mbtn" @tap="toWithdraw()">继续出款</button>
								<button class="mbtn backtotake" @tap="toBack()">放弃</button></div>
							<br>
						</div>
					</div>
				</div>
				<div class="table-container withdrawnow" v-show="!jihe">
					<div class="table-content take_form p20">
						<view class="p"><label><span style="color: red;">*</span> DS主账户：</label>￥ <span class="div_main_money">{{ money }}</span>
							<!-- <button class="change_get_btn mbtn">修改取款密码</button> -->
						</view>
						<view class="p"><label><span style="color: red;">*</span> 取款密码：</label>
							<input type="password" @input="bindPwdInput" v-model="qk_pwd" class="takepassword input4" name="qk_pwd"></view>
						<view class="p"><label><span style="color: red;">*</span> 提款人：</label><span class="div_username">{{ userName }}</span></view>
						<view class="p"><label><span style="color: red;">*</span> 提取金额：</label>
							<input class="takemoney input4" type="text" name="takemoney" @input="bindMoneyInput" v-model="qk_money"></view>
						<view class="p"><label><span style="color: red;">*</span> 实收金额：</label>
							<input class="takemoney input4" type="text" name="takemoney" v-model="real_money">
							<span class="withfee koufei ">(取款金额 - 手续费{{ withfees }})</span>
						</view>
						<view class="money_limit">出款上限：<span class="take_money_max">1000000</span> 出款下限：<span class="take_money_min">100</span></view>
						<view class="p"><label><span style="color: red;">*</span> 银行帐号：</label></view>
						<view class="p"><span class="bank_detail">{{ bank_detail }}</span></view>
						<view class="money_button">
							<button id="go_take_money" class="mbtn" @tap="Withdraw()">继续出款</button>
						</view>
						<div class="loading"></div>

					</div>

				</div>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				jihe: true,
				withdrawtimes: 0,
				sumbets: 0,
				sumrecharges: 0,
				withfees: 0,
				betfee: 0,
				bank_detail: 0,
				money: 0,
				qk_money: '',
				qk_pwd: '',
				real_money: '',
			}
		},
		onLoad: function() {
			this.getWithdrawInfo();

		},
		computed: mapState(['apiUrl', 'token', 'userName']),
		methods: {
			getWithdrawInfo: function() {
				this.loading = true;
				//	console.log(requestUrl);
				const data = {
					token: this.token
				};
				uni.request({
					url: this.apiUrl + 'app/jihe',
					method: 'POST',
					data: data,
					success: (res) => {
						let msg = res.data.msg;
						uni.showToast({
							title: msg,
							icon: 'success',
							mask: true
						})

						this.withdrawtimes = res.data.data.withdrawtimes;
						this.sumbets = res.data.data.sumbets;
						this.sumrecharges = res.data.data.sumrecharges;
						this.withfees = res.data.data.withfees;
						this.betfee = res.data.data.betfee;
						this.bank_detail = res.data.data.bank_detail;
						this.money = res.data.data.money;
					},
					fail: (err) => {
						console.log('request fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false
					}
				})

			},
			toWithdraw: function(e) {
				this.jihe = false
			},
			toBack() {
				uni.navigateBack();


			},
			Withdraw: function() {
				if (this.qk_pwd.length != 6) {
					uni.showToast({
						icon: 'none',
						title: '取款密码为六位数字'
					});
					return;
				}
				if (this.qk_money.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '金额不能为空'
					});
					return;
				}
				this.loading = true;
				//	console.log(requestUrl);
				const data = {
					token: this.token,
					money: this.money,
					qk_pwd: this.qk_pwd
				};
				uni.request({
					url: this.apiUrl + 'app/withdraw',
					method: 'POST',
					data: data,
					success: (res) => {
						let msg = res.data.msg;
						uni.showToast({
							title: msg,
							icon: 'success',
							mask: true
						})

					},
					fail: (err) => {
						console.log('request fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					},
					complete: () => {
						this.loading = false
					}
				})

			},
			goBrowser: function(href) {

				// #ifdef APP-PLUS
				plus.runtime.openURL(href);
				//plus.runtime.webview.open(href);
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					content: "请复制链接在浏览器里打开",
					showCancel: false
				})
				// #endif
			},
			bindMoneyInput: function(e) {
				this.qk_money = e.target.value;
				if (this.qk_money > this.withfees) {
					this.real_money = this.qk_money - this.withfees;
				}else{
					this.real_money = 0;
				}

			},
			bindPwdInput: function(e) {
				this.qk_pwd = e.target.value
			},
		}
	}
</script>

<style>
	.page-section {
		width: auto;
		padding: 0upx 20upx;
		background-color: #fff;
		font-size: 28upx;
	}

	.desc {
		color: #B2B2B2;
	}

	.price {
		margin-top: 30upx;
		margin-bottom: 25upx;
		position: relative;
		display: inline-block;
		font-size: 78upx;
		line-height: 1;
	}

	.money_limit {
		color: #999;
		font-size: 25upx;
		margin-left: 30upx;
	}

	.red {
		color: red;
	}

	.rmbLogo {
		position: absolute;
		font-size: 40upx;
		top: 8upx;
		left: -40upx;
	}

	.take_form .input4 {
		width: 220upx;
		display: inline-block;
		vertical-align: middle;
	}
	.take_form  .p{
		margin: 20upx;
	}

	.input4,
	textarea,
	select,
	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="email"],
	input[type="url"] {
		background: #fff;
		border: 1px solid #cccccc;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
		-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
		-o-transition: border linear 0.2s, box-shadow linear 0.2s;
		transition: border linear 0.2s, box-shadow linear 0.2s;

	}

	button {
		background-color: #007aff;
		color: #ffffff;
		font-size: 30upx;

	}

    
	.ucheck {
		padding: 10px 0 0;
	}

	.ucheck .p {
		margin: 10px;
	}

	.usercheck td,
	.usercheck th {
		height: 30px;
		line-height: 30px;
		border-bottom: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}

	.tgray {
		background-color: #aaa;
	}

	.tbsize {
		float: left;
		margin-right: 103px;
		margin-left: 24px;
	}

	.tdsize {
		text-align: left;
		background-color: #888;
		color: #fff;
		font-size: 27upx;
		padding: 3px 10px;
	}
</style>
